<template>
    <div class="container">
        <div class="space-left">
            <div class="side-bar">
                <div class="title">
                    <div class="icon"></div>
                    <div>消息中心</div>
                </div>
                <el-divider class="divide"></el-divider>
                <ul class="list">
                    <li v-for="(item,index) in items" :key="index" @click="clickListItem(item,index)" :class="{'item-active': item.listItem ,'item':!item.listItem}">
                        <a title>{{item.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="space-right">
            <div class="space-right-top">
                <div class="title">
                    <div>
                        <span>详细消息</span>
                    </div>
                </div>
            </div>
            <div class="divde"></div>
            <div class="space-right-bottom ps">
                <div class="info">
                    <div v-for="(item,index) in messageInfo" :key="index" >
                        <a class="info-time">{{item.time}}</a>
                        <div class="info-person">
                            <a class="info-tip">房屋类型:{{item.house}}</a><br>
                            <a class="info-tip">房屋地址:{{item.houseAddress}}</a><br>
                            <a class="info-tip">会面时间:{{item.meetingTime}}</a><br>
                            <a class="info-tip">会面地点:{{item.address}}</a><br>
                            <a class="info-tip">申请人联系电话:{{item.tphone}}</a>
                            <el-divider></el-divider>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import messageTips from '@/api/houseowner/messageTips'
import Vue from 'vue'

export default {
    data() {
        return {
            listItem:false,
            items:[
                {name:'系统通知'},
            ],
            messageInfo:[],
            houseAddress:'',
            houseInfo:[],
        }
    },
    created(){
        this.newMessageTips()
    },
    methods:{
        clickListItem(item,index){
            this.$nextTick(function(){
                this.items.forEach(function(item){
                    Vue.set(item,'listItem',false);
                });
                Vue.set(item,'listItem',true)
            })
        },
        format(s){
            const date = new Date(s);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var str = y.toString()+'-'+m.toString()+'-'+d.toString()
            return str
        },
        newMessageTips(){
            this.messageAttend = '租客:'+'';
            const hphone = localStorage.getItem('owner_id');
            messageTips.newMessageTips(hphone)
            .then(response => {
                var list = [];
                if (response.data){
                    response.data.forEach(u =>{
                        var type = 0
                        var houseAddress = u.houseid
                        while (houseAddress%10 !== 0){
                            type = type + 1
                            houseAddress = houseAddress - 1
                        }
                        houseAddress = houseAddress/10


                        if (type === 1){
                            type = '单人房'
                        } else if (type === 2){
                            type = '双人房'
                        }
                        if (u.address === 1){
                            u.address = '咖啡馆'
                        } else if(u.address === 2){
                            u.address = '餐厅'
                        } else if(u.address === 3){
                            u.address = '酒店'
                        } else if(u.address === 4){
                            u.address = '公园'
                        } else if(u.address === 5){
                            u.address = '图书馆会议室'
                        } else {
                            u.address = '显示错误！！'
                        }
                        var detail = {
                            time:this.format(u.date),
                            house:type,
                            houseAddress:u.houseaddress,
                            meetingTime:this.format(u.meetime),
                            address:u.address,
                            tphone:u.tphone
                        }
                        list.push(detail)
                    })
                    for(var j = list.length;j > 0;j--){
                        this.messageInfo.push(list.pop())
                    }



                }

            })

        }
    }
}
</script>
<style>
.container {
    height: calc(100vh + 100vh);
    margin: 0 auto;
    max-width:100%;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: stretch;
    align-items: stretch;
}
.el-divider--vertical {
    display: inline-block;
    width: 4px;
    height: 42.5em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    background-color: #85dbff;
}
.space-left {
    width: 140px;
    min-width: 140px;
    background-color: rgba(255,255,255,0.8);
}
.side-bar {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #666;
}
.title{
    height: 62px;
    display: flex;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    color: #333;
    font-size: 25px;
}
.side-bar .icon {
    width: 14px;
    height: 16px;
    margin-right: 10px;
    background: url(../../assets/img/plane.svg) ;
}
.list{
    margin: 0;
    padding: 0 0 0 20px;
}
.list li ::before{
    content: "\25cf";
    line-height: 20px;
}
.item{
    height: 40px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    color: #6b757b;
}
.item ::before{
    width: 10px;
    height: 20px;
    text-align: center;
}
.item-active{
    font-size: 20px;
    color: #2faee3;
}
.item a {
    padding-left: 10px;
    line-height: 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 20px;
}
.divde{
    margin-bottom: 10px;
    margin-top: 10px;
    height: 10px;
    background-color: #85dbff;
}
.space-right {
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    background-color: rgba(255,255,255,0.5);
}
.space-right .space-right-top {
    padding: 10px 10px 0;
    z-index: 11;
}
.space-right .space-right-top .title[data-v-1c9150a9] {
    height: 42px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgb(121 146 185 / 54%);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 15px;
    color: #666;
    border-radius: 4px;
}
.space-right .space-right-bottom {
    padding: 10px;
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    height: calc(100% - 66px);
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    touch-action: auto;
}
.info-tip{
    font-size: 15px;
}
.info-time{
    display: block;
    text-align: center;
    color: gray;
}
</style>
